<template>
    <view class='page report'>
        <img style="width: 100%;z-index: -1;display: block;7" src="../../static/titleBoxResult.png" alt="">

        <view class="subTitletop">
            <view style="">2024年食品安全</view>
            <view>“你点我检”进景区服务活动</view>
        </view>
        <view class="tipBox">
            <view class="tip">
                消费者可点击本文下方“你点我检”进景区调查问卷进行投票,在公布的景区及食品种类清单中，选择最关心并认为存在安全风险的景区及食品即可参与投票。
            </view>
            <view class="gotoreportResult" @click="gotoreportResult">
                <view class="resultBox">
                    <img style="width: 15vw;z-index: -1;display: block;7" src="../../static/icon.png" alt="">
                    <view>投票结果</view>
                </view>
            </view>
        </view>
        <view class="formBox">
            <view class="page-form">
                <view style="color: #f00;" v-if="disabled">
                    今日投票次数已达上限，请明日再来
                </view>
                <!-- <view class="Ttitle">
                    食品安全“你点我检”调查问卷
                </view> -->
                <view class="subtitle">
                    <!-- 第二期活动 -->
                    <view style="">食品安全“你点我检”进景区</view>
                    <view>调查问卷</view>
                </view>
                <view class="topicItemBox">
                    <view v-for="(item, index) in topicList" :key="index" class="topicItem">
                        <!-- {{item.check}} -->
                        <view class="title">{{ index + 1 }}.{{ item.title }}</view>
                        <!-- <view v-if="item.topicItem[0].textAll">
                            <view v-for="(itemin, indexin) in item.topicItem" :key="indexin">
                                <uni-data-checkbox :disabled="disabled" multiple v-model="itemin.textAll.check" :localdata="[itemin.textAll]"
                                    class="textAllTitle" @change="changetextAll($event, indexin)">
                                </uni-data-checkbox>
                                <uni-data-checkbox :disabled="disabled" multiple v-model="itemin.check" :localdata="itemin.children"
                                    class="textAllContent" :style="indexin == item.topicItem.length - 1 ? 'border:none' : ''">
                                </uni-data-checkbox>
                            </view>
                        </view> -->
                        <uni-data-checkbox :disabled="disabled" multiple v-model="item.check" :localdata="item.topicItem"
                            :map="{text:'note',value:'value'}"></uni-data-checkbox>
                    </view>
                    <view class="topicItem" style="border:none;padding-bottom:0;">
                        <view class="title">3.除了以上景区及食品品种，您还认为其他景区或景区哪些食品安全风险较高，需要监督抽检?</view>
                        <uni-easyinput :disabled="disabled" type="textarea" v-model="other" placeholder="请输入内容"></uni-easyinput>
                    </view>

                </view>
                <!-- <view class="textAgg" @click="showAgreement">
                我已阅读并同意《用户协议》和《隐私政策》
            </view> -->
            </view>
            <button v-if="!disabled" type="primary" @click="submit('valiForm')" class='btn'>提交</button>

            <view class="cc-bottom ">
                呼和浩特市市场监督管理局
            </view>

        </view>
        <!-- <cc-bottom :isFixed='false' /> -->
        <!-- <popup ref="affirm" @getdata="getdata" title="用户隐私协议" width="600rpx" :isShowCancel="false" :top="0">
        <template #body>
          <view class="affirmBody"> 
			  <scroll-view style="height:100%" scroll-y="true"> <view v-html="text" class="content"></view></scroll-view>
			 
		  </view>
        </template>
      </popup> -->
    </view>
</template>

<script>
import ldSelect from '../../components/ld-select/ld-select.vue' //补存信息
import ccBottom from '../../components/cc-bottom/cc-bottom.vue' //补存信息
import Api from '@/utils/request/api.js'
import popup from "@/components/popup.vue";
import { text } from './agreement.js'
export default {
    components: {
        ldSelect,
        ccBottom,
        popup
    },
    data() {

        return {
            topicList: [],
            originalList: [
                {
                    title: '请选择您认为应该抽检我市哪些景区的餐馆、超市、特产店等食品经营单位（多选）',
                    check: [],
                    dataKey: 'scenic',
                    topicItem: [
                    ]
                },
                {
                    title: '请选择您认为在景区的餐馆、超市、特产店等食品经营单位中应该重点抽检哪些产品（多选）',
                    check: [],
                    dataKey: 'product',
                    topicItem: []
                },
            ],
            other: '',
            disabled: false,
            submitNum: 0
        }
    },
    onShow(op) {
        this.other=''
        this.topicList = JSON.parse(JSON.stringify(this.originalList))
        uni.pageScrollTo({
            scrollTop: 0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
            duration: 0  // 滚动动画的时长
        })
        let that = this
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        this.today = year + '-' + month + '-' + day
        uni.getStorage({
            key: 'submitdate',
            success: function (res) {
                if (res.data != that.today) {
                    that.submitNum = 0
                    uni.setStorage({
                        key: 'submitNum',
                        data: String(that.submitNum),
                    });
                }
            }
        });
        uni.getStorage({
            key: 'submitNum',
            success: function (res) {
                that.submitNum = res.data ? Number(res.data) : 0
                if (that.submitNum == 3) {
                    that.disabled = true
                }
            }
        });
        console.log(that.submitNum);
        this.getScenicList()
        this.getProductList()
    },
    onReady() {
        // 需要在onReady中设置规则
        // this.$refs.valiForm.setRules(this.rules)
    },
    methods: {
        getScenicList() {
            Api.scenicList().then(res => {
                console.log(res);
                this.topicList[0].topicItem = res.data
            })
        },
        getProductList() {
            Api.productList().then(res => {
                this.topicList[1].topicItem = res.data
            })
        },
        setNum(e) {
            this.setnum = e.detail.value ? Number(e.detail.value) : 0
            console.log(e.detail.value);
        },
        getdata() {
            this.$refs.affirm.close();
        },
        showAgreement() {
            this.$refs.affirm.open();
        },
        totalNumberOfPeopleChange(e, key) {

            var numReg = /^[0-9]*$/
            var numRe = new RegExp(numReg)


            if (!numRe.test(e)) {
                this.valiFormData[key] = ''
            }
            console.log(Number(e) > 1000000);
            if (Number(e) > 1000000) {
                this.valiFormData[key] = 1000000
                this.valiFormData = JSON.parse(JSON.stringify(this.valiFormData))
                this.$forceUpdate()
            }
            this.valiFormData = {
                ...this.valiFormData,
                // sex: '1'
            }
        },
        submit(ref) {
            let params = {}
            for (var i in this.topicList) {
                console.log(this.topicList[i].dataKey);
                if (this.topicList[i].check.length==0) {
                    uni.showToast({
                        title: `请填写调查问卷第`+Number(Number(i)+1)+'项',
						icon: 'none'
                    })
                    return
                }
                else{
                    params[`${this.topicList[i].dataKey}`] = (this.topicList[i].check).join()
                }
            }
            params.other = this.other
            console.log(params);
            // return
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            Api.addInfo(params).then(res => {
                console.log(res)
                if (res.code == 200) {
                    uni.showToast({
                        title: `提交成功`
                    })
                    setTimeout(function () {
                        uni.hideLoading()
                        uni.navigateTo({
                            //保留当前页面，跳转到应用内的某个页面
                            url: '/pages/index/reportResult'
                        })
                    }, 1500);
                    uni.setStorage({
                        key: 'submitdate',
                        data: this.today,
                    });
                    this.submitNum++
                    uni.setStorage({
                        key: 'submitNum',
                        data: String(this.submitNum),
                    });
                    if (that.submitNum == 3) {
                        that.disabled = true
                    }
                    uni.pageScrollTo({
                        scrollTop: 0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
                        duration: 0  // 滚动动画的时长
                    })

                    uni.hideLoading()
                } else {
                    uni.hideLoading()
                }
            })

        },
        // 多选全选
        changetextAll(e, index) {
            let item = this.topicList[2].topicItem[index]
            item.check = []
            if (e.detail.data.length) {
                for (var i in item.children) {
                    item.check.push(item.children[i].value)
                }
                console.log('选中')
            }
            else {
                console.log('清空')
            }
        },
        gotoreportResult() {
            uni.navigateTo({
                //保留当前页面，跳转到应用内的某个页面
                url: '/pages/index/reportResult'
            })
        }
    }

}
</script>

<style scoped lang="scss">
.report {
    .report_title {
        // margin: 5px;
        // padding: 5px;
        margin-bottom: 30rpx;

        .report_line {
            width: 8rpx;
            height: 36rpx;
            margin-right: 10px;
            border-radius: 10px;
            background-color: #0e2966;
        }

        font-size: 30rpx;
        display: flex;
        color: #0e2966;
        // color: #fff;
        font-weight: 600;
    }

    /deep/.uni-forms-item__label {
        font-weight: 600 !important;
        color: #333;
        font-size: 29rpx;
    }

    /deep/uni-text {
        text-align: center !important;
    }
    .subTitletop {
        position: absolute;
        right: 20rpx;
        top: 150rpx;
        color: rgba(255, 255, 255, 0.5);
        font-size: 30rpx;
        width: 55%;
        text-align: end;
    }
}

.formBox {
    // background-color: #9cc2ff;
    background-image: linear-gradient(
        to bottom,
        #060c63,
        #152685 10%,
        #102284 70%,
        #060c63
    );
    z-index: 10;
    padding: 30rpx;
}

uni-text {
    color: #fff !important;
}

/deep/.checklist-text {
    color: #fff !important;
}

.page-form {
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    // margin-top: 50rpx;
    // background-color: #b6cdfc;
    background-color: rgba($color: rgb(71, 109, 231), $alpha: 0.2);
    border: rgba(255, 255, 255, 0.3) 0.5px solid;
    z-index: 10;
    color: #fff;

    .Ttitle {
        // color: #022ba7;
        color: #fff;
        font-size: 36rpx;
        padding-bottom: 20rpx;
        text-align: center;
    }
    .subtitle {
        text-align: center;
        font-size: 40rpx;
        font-weight: 600;
        border-bottom: 1px dashed;
        padding-bottom: 20rpx;
        /*设置线性渐变*/
        border-image: linear-gradient(
                90deg,
                rgba(0, 216, 247, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(0, 216, 247, 0) 100%
            )
            2 2 2 2;
    }

    .topicItemBox {
        padding: 20rpx 0 0 0;

        // border-bottom: 1px dashed;
        // /*设置线性渐变*/
        // border-image: linear-gradient(
        //         90deg,
        //         rgba(0, 216, 247, 0) 0%,
        //         rgba(255, 255, 255, 0.7) 50%,
        //         rgba(0, 216, 247, 0) 100%
        //     )
        //     2 2 2 2;
        .topicItem {
            padding: 30rpx 0;
            border-bottom: 1px dashed;
            /*设置线性渐变*/
            border-image: linear-gradient(
                    90deg,
                    rgba(0, 216, 247, 0) 0%,
                    rgba(255, 255, 255, 0.7) 50%,
                    rgba(0, 216, 247, 0) 100%
                )
                2 2 2 2;

            .title {
                padding-bottom: 20rpx;
            }

            .textAllTitle {
                padding: 0rpx 0 10rpx 0;
                margin-top: 30rpx;
            }

            .textAllContent {
                padding-bottom: 30rpx;
                margin-bottom: 30rpx;
                border-bottom: 1px dashed;
                /*设置线性渐变*/
                border-image: linear-gradient(
                        90deg,
                        rgba(0, 216, 247, 0) 0%,
                        rgba(255, 255, 255, 0.7) 50%,
                        rgba(0, 216, 247, 0) 100%
                    )
                    2 2 2 2;
            }

            /deep/.uni-easyinput__content {
                background: transparent !important;
            }
        }
    }
}

.affirmBody {
    height: 600rpx;
    /* overflow: auto; */
    padding: 22rpx;
}

/* .affirmBody .content{
		overflow: auto;
		height: 100%;
	} */
.textAgg {
    font-family: PingFang SC Regular;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 80rpx;
    letter-spacing: 0px;
    color: #969696;
    text-align: center;
    margin-top: 30rpx;
}

.textphone {
    font-family: PingFang SC Regular;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 60rpx;
    letter-spacing: 0px;
    color: rgba(230, 162, 50, 1);
    margin-top: -15rpx;
}

.page h1 {
    font-size: 40rpx;
    font-weight: normal;
    padding: 20rpx;
}

.btn {
    font-size: 36rpx;
    width: calc(100vw - 60rpx);
    margin-top: 40rpx;
    padding: 10rpx;
    // 699CFF/
    // 3F74FF
    background-image: linear-gradient(to right, #699cff, #3f74ff);
}
.tipBox {
    background-color: #06239a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tip {
        display: flex;
        align-items: center;
        width: calc(100% - 30vw);
        height: 29vw;
        background-color: #2c4b9e;
        border-radius: 10rpx;
        padding: 20rpx;
        color: rgba(255, 255, 255, 0.877);
    }
    .gotoreportResult {
        text-align: center;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        border-radius: 10rpx;
        background-color: #0153e5;
        width: 29vw;
        height: 29vw;
        .resultBox {
            img {
                margin: 0 auto 10rpx;
            }
        }
    }
}

/deep/.uni-easyinput {
    color: #fff !important;
}

.cc-bottom {
    text-align: center;
    padding: 50rpx;
    color: #fff;
    font-size: 34rpx;
    // font-weight: 600;
}
</style>
